<script setup lang="ts">
import { debounce } from "lodash";

import useCounter from "@/hooks/useCounter";

const { precision, max, min } = defineProps<{
  precision?: number;

  min?: number;
  max?: number;
}>();

const model = defineModel<number>();

const { count, inc, dec, set, reset } = useCounter(model, {
  precision,
  max,
  min,
});

const handleInput = debounce((e) => {
  const { value } = e.detail;
  if (value != "") {
    set(Number(value));
  }
}, 300);
</script>

<template>
  <view>{{ count }}</view>

  <input v-model="count" type="number" @input="handleInput" />

  <view class="flex">
    <button @tap="inc()">+</button>
    <button @tap="dec()">-</button>
    <button @tap="set(5.2)">5.2</button>
    <button @tap="reset()">reset</button>
  </view>
</template>
